1
00:00:02,070 --> 00:00:04,600
So now we already learned quite a bit

2
00:00:04,600 --> 00:00:06,910
about Redux but up to this point,

3
00:00:06,910 --> 00:00:10,960
我們總是只使用我們的單一計數器值。

4
00:00:10,960 --> 00:00:13,600
Now I got this Toggle Counter button here

5
00:00:13,600 --> 00:00:14,710
當它被點擊時，

6
00:00:14,710 --> 00:00:17,090
I wanna make sure that the counter is hidden

7
00:00:17,090 --> 00:00:19,710
當再次單擊它時，它應該再次顯示。

8
00:00:19,710 --> 00:00:23,253
Now for this, of course, we could use useState.

9
00:00:24,113 --> 00:00:27,420
所以我們可以在這個元件中設定一些本地狀態

10
00:00:27,420 --> 00:00:31,400
which we manage with useState, not with Redux.

11
00:00:31,400 --> 00:00:34,090
And that would be the proper way of doing it

12
00:00:34,090 --> 00:00:37,180
因為顯示或隱藏計數器

13
00:00:37,180 --> 00:00:40,900
是只有這個組件才感興趣的東西，

14
00:00:40,900 --> 00:00:44,080
不應用於應用程式的任何其他部分

15
00:00:44,080 --> 00:00:46,990
但我們的櫃檯也可以進行同樣的設定。

16
00:00:46,990 --> 00:00:50,410
我們在這裡僅使用該元件中的計數器。

17
00:00:50,410 --> 00:00:53,660
所以計數器從技術上來說也是本地狀態

18
00:00:54,560 --> 00:00:57,400
但這只是一個簡單的入門示範。

19
00:00:57,400 --> 00:01:01,540
所以我們假設計數器和狀態

20
00:01:01,540 --> 00:01:03,930
無論櫃檯是否可見，

21
00:01:03,930 --> 00:01:06,940
是一個全局狀態，這也是有趣的

22
00:01:06,940 --> 00:01:10,540
到其他组件，尽管这里的情况并非如此。

23
00:01:10,540 --> 00:01:13,200
一旦我们了解了这些基础知识，随着我们的进步，

24
00:01:13,200 --> 00:01:16,530
當然，我們也會致力於演示和項目

25
00:01:16,530 --> 00:01:19,270
事實確實如此。

26
00:01:19,270 --> 00:01:21,820
但目前，我們假設一下。

27
00:01:21,820 --> 00:01:23,560
所以當我們點擊這個按鈕時，

28
00:01:23,560 --> 00:01:26,520
觸發了toggleCounterHandler。

29
00:01:26,520 --> 00:01:29,900
然後我們想要發送一個動作

30
00:01:29,900 --> 00:01:32,720
這會改變 Redux 中的某些狀態

31
00:01:32,720 --> 00:01:36,263
它控制是否顯示此計數器 div。

32
00:01:37,910 --> 00:01:41,080
為此，我們需要新增一個新的狀態

33
00:01:41,080 --> 00:01:45,400
我們的 Redux 儲存中新增了一條新資料。

34
00:01:45,400 --> 00:01:48,310
現在我們該怎麼做呢？

35
00:01:48,310 --> 00:01:50,750
好吧，要新增一條新數據，

36
00:01:50,750 --> 00:01:54,910
最後我們需要轉到我們的減速器並添加它

37
00:01:54,910 --> 00:01:59,910
我們正在製作的所有這些狀態快照。

38
00:02:00,050 --> 00:02:02,750
讓我們從初始狀態快照開始。

39
00:02:02,750 --> 00:02:05,370
當我們開始除了有一個櫃檯

40
00:02:05,370 --> 00:02:09,500
它的值為零，我想要一個 showCounter 字段

41
00:02:09,500 --> 00:02:14,230
它的值為 true 或 false，由您決定。

42
00:02:14,230 --> 00:02:15,980
為了使其更具可讀性，

43
00:02:15,980 --> 00:02:18,970
我將提取它並將其存儲在一個常量中

44
00:02:18,970 --> 00:02:22,520
像這樣命名初始狀態

45
00:02:22,520 --> 00:02:25,080
然後在這裡分配initialState

46
00:02:25,080 --> 00:02:27,223
只是為了讓這件事更容易閱讀。

47
00:02:28,370 --> 00:02:32,790
现在当我们递增时，我们正在改变计数器，

48
00:02:32,790 --> 00:02:35,490
我們不關心 showCounter。

49
00:02:35,490 --> 00:02:40,490
不过我们仍然需要在这里设置 showCounter 属性

50
00:02:40,550 --> 00:02:44,490
因為我們回傳的是整體狀態對象

51
00:02:44,490 --> 00:02:48,720
Redux 不会将您的更改与现有状态合并。

52
00:02:48,720 --> 00:02:50,990
它取而代之的是你回歸的東西

53
00:02:50,990 --> 00:02:54,360
並用它取代現有狀態。

54
00:02:54,360 --> 00:02:56,350
稍後會詳細介紹。

55
00:02:56,350 --> 00:02:58,540
但目前只能接受它

56
00:02:58,540 --> 00:03:03,080
並將此處的showCounter設定為state.showCounter。

57
00:03:03,080 --> 00:03:05,970
所以對於我們州目前的價值

58
00:03:05,970 --> 00:03:08,480
因為對於增量，我們不想改變它，

59
00:03:08,480 --> 00:03:12,263
所以我們只採用現有的 showCounter 值。

60
00:03:13,670 --> 00:03:16,510
然後我們可以在這裡做同樣的事情來增加

61
00:03:16,510 --> 00:03:18,330
因為我們也想保留在那裡

62
00:03:18,330 --> 00:03:21,230
現有的 showCounter 值

63
00:03:21,230 --> 00:03:24,173
並在這裡對減量執行相同的操作。

64
00:03:25,780 --> 00:03:29,650
但現在我還將處理一個新的動作類型

65
00:03:29,650 --> 00:03:32,700
順便說一句，因為我們這裡有很多 if 語句，

66
00:03:32,700 --> 00:03:35,670
我們也可以使用 switch case 語句，

67
00:03:35,670 --> 00:03:38,900
但我現在會堅持使用多個 if 語句

68
00:03:38,900 --> 00:03:41,310
在這種新的動作類型中，

69
00:03:41,310 --> 00:03:44,700
我會檢查一下，比如說切換。

70
00:03:44,700 --> 00:03:47,700
現在的標識符就像所有這些標識符一樣

71
00:03:47,700 --> 00:03:48,950
由你決定。

72
00:03:48,950 --> 00:03:53,180
我將使用切換，然後返回一個新物件。

73
00:03:53,180 --> 00:03:56,540
在這裡，我們現在想要更改 showCounter

74
00:03:56,540 --> 00:04:00,100
並將其設定為與先前相反的值。

75
00:04:00,100 --> 00:04:03,040
如果它是 true，我們想將其設為 false，

76
00:04:03,040 --> 00:04:05,960
如果它是假的，我們想要將它設為真。

77
00:04:05,960 --> 00:04:09,080
我們可以透過簡單地添加一個感嘆號來做到這一點

78
00:04:09,080 --> 00:04:11,900
然後造訪state.showCounter。

79
00:04:11,900 --> 00:04:14,023
這將反轉該值。

80
00:04:14,890 --> 00:04:18,010
現在對於計數器本身，我們想保持現有狀態

81
00:04:18,010 --> 00:04:21,010
因為我們不想在此操作中更改此設定。

82
00:04:21,010 --> 00:04:23,593
所以我們只需將 counter 設定為 state.counter 即可。

83
00:04:25,660 --> 00:04:29,520
現在我們也支援這個新的切換操作類型

84
00:04:29,520 --> 00:04:34,290
因此回到了 counter.js 中的toggleCounterHandler，

85
00:04:34,290 --> 00:04:36,920
我們應該採取這樣的行動。

86
00:04:36,920 --> 00:04:41,193
我们调度一个新的动作对象，其类型为切换。

87
00:04:43,840 --> 00:04:47,910
現在我們可以利用這個切換狀態，

88
00:04:47,910 --> 00:04:50,360
所以在節目 counter.state 中，

89
00:04:50,360 --> 00:04:52,630
為此我們需要訪問它。

90
00:04:52,630 --> 00:04:57,300
所以所有的都在计数器中，我们再次调用useSelector。

91
00:04:57,300 --> 00:05:00,910
我们可以多次使用它来检索不同的部分

92
00:05:00,910 --> 00:05:02,940
來自國家的數據。

93
00:05:02,940 --> 00:05:04,810
我對這裡有興趣

94
00:05:04,810 --> 00:05:08,173
在我的 showCounter 數據中，

95
00:05:09,170 --> 00:05:12,570
我會將其儲存在一個顯示常數中。

96
00:05:12,570 --> 00:05:14,620
當然，常量名稱由您決定。

97
00:05:15,750 --> 00:05:18,190
現在，這將始終更新

98
00:05:18,190 --> 00:05:20,710
並且該組件將被重新評估

99
00:05:20,710 --> 00:05:24,400
每當我們在這裡訪問的數據發生變化時。

100
00:05:24,400 --> 00:05:27,760
現在這裡提取了表演，

101
00:05:27,760 --> 00:05:31,900
我們現在可以有條件地在這裡渲染這個 div

102
00:05:31,900 --> 00:05:35,130
透過檢查是否顯示並僅渲染 div

103
00:05:35,130 --> 00:05:38,980
如果節目是真的，就像這樣。

104
00:05:38,980 --> 00:05:41,270
如果我們現在保存並重新加載，

105
00:05:41,270 --> 00:05:43,340
如果我們點擊“切換計數器”，它就會消失，

106
00:05:43,340 --> 00:05:45,730
如果我再次點擊它，它就會再次出現。

107
00:05:45,730 --> 00:05:48,520
即使隱藏我仍然可以增加它

108
00:05:48,520 --> 00:05:50,320
但它只在以下情況下出現：

109
00:05:50,320 --> 00:05:52,690
好吧，當我單擊“切換計數器”時。

110
00:05:52,690 --> 00:05:56,200
所以現在也可以了，這就是我們可以管理的方式

111
00:05:56,200 --> 00:06:01,030
我們州的多個不同數據。

112
00:06:01,030 --> 00:06:04,370
當然，這些數據仍然是有連結的，

113
00:06:04,370 --> 00:06:05,853
我們有計數器，然後是狀態

114
00:06:05,853 --> 00:06:08,060
無論我們是否想展示它

115
00:06:08,060 --> 00:06:10,520
但這是完全不同的價值觀

116
00:06:10,520 --> 00:06:13,470
它們以完全不同的方式改變。

117
00:06:13,470 --> 00:06:15,570
因此，這就是我們可以管理的方式

118
00:06:15,570 --> 00:06:17,463
多條數據。